
<template>
  <!-- :style="{ backgroundColor: bgColor, 
    '-webkit-filter': 'blur(0px)' 
  }" -->
  <div class="jzd-rootboard" ref="boardRef">
    <WritingBoard v-if="onTool === 'shape'" ref="tempBoardRef" :boardWidth="boardWidth" :boardHeight="boardHeight"
      :scale="writingScale" :mode="writingMode" outType="points" :color="writingColor" :size="writingSize"
      :zIndex="boardZIndex + 2" @writing="handleWritingShape"></WritingBoard>
    <WritingBoard v-if="boardWidth > 0" ref="writingBoardRef" :boardWidth="boardWidth" :boardHeight="boardHeight"
      :scale="writingScale" :mode="writingMode" :isDraw="isDraw" :color="writingColor" :size="writingSize"
      :zIndex="boardZIndex + 1"></WritingBoard>
    <div v-if="!closeTool" class="jzd-toolbox">
      <div class="toolbar" :style="{ backgroundColor: bgDeepColor, zIndex: boardZIndex + 10 }">
        <div class="item" v-if="onTool !== 'pen'" @click="handleOnTool('pen')">
          <img v-if="onTool === 'pen'" class="img" src="@assets/img/writingboard/pen_on.png" />
          <img v-else class="img" src="@assets/img/writingboard/pen.png" />
          <span class="label" :class="onTool === 'pen' ? 'on' : ''">笔</span>
        </div>
        <Popover v-else v-model:visible="popoverPenVisiable" :color="bgDeepColor" trigger="click">
          <template #content>
            <div class="popover-pen">
              <div class="name">类型</div>
              <div class="box">
                <RadioGroup v-model:value="onPen" name="penGroup" @change="changePen">
                  <Radio class="radio" value="pen">硬笔</Radio>
                  <Radio class="radio" value="flupen">荧光笔</Radio>
                </RadioGroup>
              </div>
              <div class="name">尺寸</div>
              <div class="slider-box">
                <Slider :max="8" :min="2" :default-value="penSize" @change="changePenSize" />
              </div>
              <div class="name">颜色</div>
              <div class="color-box">
                <div class="item" :class="writingColor === '#D94659' ? 'on' : ''" @click="changePenColor('#D94659')">
                  <div class="bg" style="background-color:#D94659;"></div>
                </div>
                <div class="item" :class="writingColor === '#D87950' ? 'on' : ''" @click="changePenColor('#D87950')">
                  <div class="bg" style="background-color:#D87950;"></div>
                </div>
                <div class="item" :class="writingColor === '#9455B1' ? 'on' : ''" @click="changePenColor('#9455B1')">
                  <div class="bg" style="background-color:#9455B1;"></div>
                </div>
                <div class="item" :class="writingColor === '#EAB05A' ? 'on' : ''" @click="changePenColor('#EAB05A')">
                  <div class="bg" style="background-color:#EAB05A;"></div>
                </div>
                <div class="item" :class="writingColor === '#78A965' ? 'on' : ''" @click="changePenColor('#78A965')">
                  <div class="bg" style="background-color:#78A965;"></div>
                </div>
                <div class="item" :class="writingColor === '#255AED' ? 'on' : ''" @click="changePenColor('#255AED')">
                  <div class="bg" style="background-color:#255AED;"></div>
                </div>
                <div class="item" :class="writingColor === '#000000' ? 'on' : ''" @click="changePenColor('#000000')">
                  <div class="bg" style="background-color:#000000;"></div>
                </div>
                <div class="item" :class="writingColor === '#FFFFFF' ? 'on' : ''" @click="changePenColor('#FFFFFF')">
                  <div class="bg" style="background-color:#FFFFFF;"></div>
                </div>
              </div>
            </div>
          </template>
          <div class="item">
            <img v-if="onTool === 'pen'" class="img" src="@assets/img/writingboard/pen_on.png" />
            <img v-else class="img" src="@assets/img/writingboard/pen.png" />
            <span class="label" :class="onTool === 'pen' ? 'on' : ''">笔</span>
          </div>
        </Popover>
        <div class="item" @click="handleOnTool('eraser')">
          <img v-if="onTool === 'eraser'" class="img" src="@assets/img/writingboard/eraser_on.png" />
          <img v-else class="img" src="@assets/img/writingboard/eraser.png" />
          <span class="label" :class="onTool === 'eraser' ? 'on' : ''">橡皮檫</span>
        </div>
        <Popover v-model:visible="popoverShapeVisiable" :color="bgDeepColor" trigger="click">
          <template #content>
            <div class="popover-shape">
              <img v-if="onShape === 'arrowright'" class="item" @click="changeShape('arrowright')"
                src="@assets/img/writingboard/arrowright_on.png" />
              <img v-else class="item" @click="changeShape('arrowright')"
                src="@assets/img/writingboard/arrowright.png" />
              <img v-if="onShape === 'roundrect'" class="item" @click="changeShape('roundrect')"
                src="@assets/img/writingboard/roundrect_on.png" />
              <img v-else class="item" @click="changeShape('roundrect')" src="@assets/img/writingboard/roundrect.png" />
              <img v-if="onShape === 'ellipse'" class="item" @click="changeShape('ellipse')"
                src="@assets/img/writingboard/ellipse_on.png" />
              <img v-else class="item" @click="changeShape('ellipse')" src="@assets/img/writingboard/ellipse.png" />
              <img v-if="onShape === 'regtri'" class="item" @click="changeShape('regtri')"
                src="@assets/img/writingboard/regtri_on.png" />
              <img v-else class="item" @click="changeShape('regtri')" src="@assets/img/writingboard/regtri.png" />
              <img v-if="onShape === 'righttri'" class="item" @click="changeShape('righttri')"
                src="@assets/img/writingboard/righttri_on.png" />
              <img v-else class="item" @click="changeShape('righttri')" src="@assets/img/writingboard/righttri.png" />
            </div>
          </template>
          <div class="item" @click="handleOnTool('shape')">
            <img v-if="onTool === 'shape'" class="img" src="@assets/img/writingboard/shape_on.png" />
            <img v-else class="img" src="@assets/img/writingboard/shape.png" />
            <span class="label" :class="onTool === 'shape' ? 'on' : ''">形状</span>
          </div>
        </Popover>
        <div class="item" @click="handleClear">
          <img class="img" src="@assets/img/writingboard/clear.png" />
          <span class="label">清屏</span>
        </div>
        <div v-if="undos.length === 0" class="item disabled">
          <img class="img" src="@assets/img/writingboard/cancel.png" />
          <span class="label">撤销</span>
        </div>
        <div v-else class="item" @click="handleUndo">
          <img class="img" src="@assets/img/writingboard/cancel.png" />
          <span class="label">撤销</span>
        </div>
        <div v-if="redos.length === 0" class="item disabled">
          <img class="img" src="@assets/img/writingboard/resume.png" />
          <span class="label">恢复</span>
        </div>
        <div v-else class="item" @click="handleRedo">
          <img class="img" src="@assets/img/writingboard/resume.png" />
          <span class="label">恢复</span>
        </div>
        <Popover v-model:visible="popoverBgVisiable" :color="bgDeepColor" trigger="click">
          <template #content>
            <div class="popover-bg">
              <div class="item" :class="bgColor === '#16366D' ? 'on' : ''" @click="changeBoardBackground('#16366D')">
                <div class="bg" style="background-color:#16366D;"></div>
              </div>
              <div class="item" :class="bgColor === '#4B5936' ? 'on' : ''" @click="changeBoardBackground('#4B5936')">
                <div class="bg" style="background-color:#4B5936;"></div>
              </div>
              <div class="item" :class="bgColor === '#2D3037' ? 'on' : ''" @click="changeBoardBackground('#2D3037')">
                <div class="bg" style="background-color:#2D3037;"></div>
              </div>
              <div class="item" :class="bgColor === '#204C51' ? 'on' : ''" @click="changeBoardBackground('#204C51')">
                <div class="bg" style="background-color:#204C51;"></div>
              </div>
              <div class="item" :class="bgColor === '#D5DDDA' ? 'on' : ''" @click="changeBoardBackground('#D5DDDA')">
                <div class="bg" style="background-color:#D5DDDA;"></div>
              </div>
            </div>
          </template>
          <!-- <div class="item" @click="handleOnTool('bg')">
          <img v-if="onTool==='bg'" class="img" src="@assets/img/writingboard/background_on.png" />
          <img v-else class="img" src="@assets/img/writingboard/background.png" />
          <span class="label" :class="onTool==='bg' ? 'on' : ''" >背景</span>
        </div> -->
        </Popover>
        <div class="vdivi"></div>
        <div v-if="pageIndex === 0" class="item w1 disabled">
          <img class="img2" src="@assets/img/writingboard/left.png" />
          <span class="label">上一页</span>
        </div>
        <div v-else class="item w1" @click="toLastPage">
          <img class="img2" src="@assets/img/writingboard/left.png" />
          <span class="label">上一页</span>
        </div>
        <div class="item2">
          <div class="text"><span class="on">{{ pageIndex + 1 }}</span> / {{ pages.length }}</div>
          <span class="label">页码</span>
        </div>
        <div class="item w2" @click="toNextPage">
          <img class="img2" src="@assets/img/writingboard/right.png" />
          <span class="label">下一页</span>
        </div>
        <div class="vdivi"></div>
        <div class="item" @click="handleCloseTool(true)">
          <img class="img pad" src="@assets/img/writingboard/close.png" />
          <span class="label">收起</span>
        </div>
      </div>
    </div>
    <div v-else class="jzd-float" :style="{ backgroundColor: bgDeepColor, zIndex: boardZIndex + 10 }"
      @click="handleCloseTool(false)">
      <img class="img" src="@assets/img/writingboard/left.png" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import WritingBoard from './WritingBoard.vue';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue } from 'vue';
import { storeToRefs } from 'pinia';
import { useBoardStore } from './board';

const boardStore = useBoardStore();
const { pageIndex, pages, undos, redos } = storeToRefs(boardStore);

const boardRef = ref();
const boardWidth = ref(0);
const boardHeight = ref(0);
const boardZIndex = ref(0);
const writingBoardRef = ref();
const writingScale = 4;
const tempBoardRef = ref();
const isDraw = ref(true);

const onTool = ref('pen');
const bgColor = ref('#16366D');
const bgDeepColor = ref('#000013');

const onShape = ref('roundrect');
const onPen = ref('pen');

const writingMode = ref('pen');
const writingColor = ref('#D94659');
const writingSize = ref(5 * writingScale);
const penSize = ref(5);

const popoverBgVisiable = ref(false);
const popoverShapeVisiable = ref(false);
const popoverPenVisiable = ref(false);

const closeTool = ref(false);

onMounted(() => {
  boardWidth.value = boardRef.value.clientWidth;
  boardHeight.value = boardRef.value.clientHeight;

  boardStore.setPage(0, { width: boardWidth.value * writingScale, height: boardHeight.value * writingScale, ele: '' });
});

function handleOnTool(tool: any) {  
  if (tool === 'pen') {
    if (onPen.value === 'flupen') {
      writingMode.value = 'flupen';
      writingSize.value = 20 * writingScale;
    } else {
      writingMode.value = 'pen';
      writingSize.value = penSize.value * writingScale;
    }
    isDraw.value = true;
  }
  else if (tool === 'eraser') {
    writingMode.value = tool;
    writingSize.value = 15 * writingScale;
    isDraw.value = true;
  }
  else if (tool === 'shape') {
    writingMode.value = onShape.value;
    writingSize.value = penSize.value * writingScale;
    isDraw.value = false;
  }
  else {
    writingMode.value = '';
    isDraw.value = false;
  }
  onTool.value = tool;
}

function changePen(e: any) {
  console.log(e);
  
  const mode = e.target.value;
  if (mode === 'pen') {
    writingMode.value = mode;
    writingSize.value = penSize.value * writingScale;
  } else if (mode === 'flupen') {
    writingMode.value = mode;
    writingSize.value = 20 * writingScale;
  }
}
function changePenColor(color: any) {
  writingColor.value = color;
  popoverPenVisiable.value = false;
}
function changePenSize(size: any) {
  penSize.value = size;
  if (writingMode.value === 'pen') {
    writingSize.value = size * writingScale;
  }
}
function changeShape(shape: any) {
  onShape.value = shape;
  writingMode.value = shape;
  writingSize.value = penSize.value * writingScale;

  popoverShapeVisiable.value = false;
}
function changeBoardBackground(color:any) {
  bgColor.value = color;
  popoverBgVisiable.value = false;
}

function handleClear() {
  if (!writingBoardRef.value) return;
  boardStore.clear();
  writingBoardRef.value.setSnapshot('');
}

function handleWritingShape(ele: any) {
  writingBoardRef.value.writeShape(ele)
  tempBoardRef.value.clearWriting()
}

function toLastPage() {
  boardStore.lastPage((ele: any) => {
    writingBoardRef.value.setSnapshot(ele);
  });
}
function toNextPage() {
  boardStore.nextPage((ele: any) => {
    writingBoardRef.value.setSnapshot(ele);
  }, { width: boardWidth.value * writingScale, height: boardHeight.value * writingScale, eles: '' });
}
function handleUndo() {
  boardStore.undo((ele: any) => {
    writingBoardRef.value.setSnapshot(ele);
  });
}
function handleRedo() {
  boardStore.redo((ele: any) => {
    writingBoardRef.value.setSnapshot(ele)
  });
}

function handleCloseTool(isClose: any) {
  closeTool.value = isClose;
}
</script>

<style scoped>
.jzd-rootboard {
  width: 100vw;
  height: 95vh;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  bottom: 0;
}

.jzd-float {
  position: absolute;
  right: 0;
  bottom: 10px;
  height: 50px;
  padding: 0 10px 0 15px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.jzd-float .img {
  width: 11px;
  height: 22px;
}

.jzd-toolbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
}

.jzd-toolbox .toolbar {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  height: 60px;
  border-radius: 10px;
}

.jzd-toolbox .toolbar .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 20px;
  cursor: pointer;
}

.jzd-toolbox .toolbar .item:active {
  opacity: 0.5;
}

.jzd-toolbox .toolbar .item.w1 {
  padding: 0 15px;
}

.jzd-toolbox .toolbar .item.w2 {
  padding-left: 15px;
  padding-right: 20px;
}

.jzd-toolbox .toolbar .item.disabled {
  opacity: 0.5;
}

.jzd-toolbox .toolbar .item .img {
  width: 22px;
  height: 22px;
}

.jzd-toolbox .toolbar .item .img.pad {
  padding: 2px;
}

.jzd-toolbox .toolbar .item .img2 {
  width: 11px;
  height: 22px;
}

.jzd-toolbox .toolbar .item .label {
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
}

.jzd-toolbox .toolbar .item .label.on {
  color: #4598FF;
}

.jzd-toolbox .toolbar .item2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 5px;
}

.jzd-toolbox .toolbar .item2 .text {
  height: 22px;
  line-height: 18px;
  color: #fff;
  font-size: 16px;
}

.jzd-toolbox .toolbar .item2 .text .on {
  color: #4598FF;
}

.jzd-toolbox .toolbar .item2 .label {
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
}

.jzd-toolbox .toolbar .vdivi {
  width: 1px;
  height: 30px;
  margin: 0 5px;
  background-color: #333;
}

.popover-bg {
  display: flex;
  align-items: center;
  height: 30px;
  margin: 0;
}

.popover-bg .item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  width: 30px;
  height: 30px;
  border: 2px solid #6D6D6D60;
  border-radius: 100%;
}

.popover-bg .item:first-child {
  margin-left: 0;
}

.popover-bg .item:active,
.popover-bg .item.on {
  border-color: #4598FF;
}

.popover-bg .item .bg {
  width: 22px;
  height: 22px;
  border-radius: 100%;
}

.popover-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  margin: 0;
}

.popover-shape .item {
  margin: 15px 5px;
  width: 22px;
  height: 22px;
}

.popover-pen {
  margin: 0;
  padding: 10px 5px;
  width: 280px;
}

.popover-pen .name {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.popover-pen .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.popover-pen .box .radio {
  margin-right: 20px;
  color: #ffffff;
  font-size: 14px;
}

.popover-pen .slider-box {
  margin-bottom: 30px;
}

.popover-pen .color-box {
  display: flex;
  flex-wrap: wrap;
}

.popover-pen .color-box .item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
  margin-bottom: 15px;
  width: 28px;
  height: 28px;
  border: 2px solid #6D6D6D60;
  border-radius: 100%;
}

.popover-pen .color-box .item:first-child,
.popover-pen .color-box .item:nth-child(6n) {
  margin-left: 0;
}

.popover-pen .color-box .item:hover,
.popover-pen .color-box .item.on {
  border-color: #4598FF;
}

.popover-pen .color-box .item .bg {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
</style>